<template>
    <div>
        <div class="pan" style="width:1280px;height:720px" id="divPan"></div>
    </div>
</template>

<script>
/*
    var mxgraph = require("mxgraph")({
    mxImageBasePath: "./src/images",
    mxBasePath: "./src"
    });
*/
    import { mxGraph , mxCompactTreeLayout , mxFastOrganicLayout ,mxHierarchicalLayout ,mxConstants ,mxEdgeStyle,mxGraphHandler} from 'mxgraph-js'    
    console.log(mxGraph)
    export default {
        
        mounted () {
            // 创建画布
            var container = document.getElementById('divPan')
            var graph = new mxGraph(container);
            var parent = graph.getDefaultParent();
            // 开始更新画布
            graph.getModel().beginUpdate();
            graph.setConnectable(true);
            graph.setCellsLocked(false);
            graph.setHtmlLabels(true);
            // 连线的样式
            var style = graph.getStylesheet().getDefaultEdgeStyle();
            //style[mxConstants.STYLE_ROUNDED] = true;//圆角连线
            style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; //自己拐弯的连线 
            style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
            mxGraphHandler.prototype.guidesEnabled = true;

            var edstyle = graph.getStylesheet().getDefaultEdgeStyle(); 
            //edstyle[mxConstants.STYLE_ROUNDED] = true;
            edstyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
            try {
                /*
                let vertexMap = {}
                for(let i=1; i< 10; i++){
                    vertexMap[i] = graph.insertVertex(parent, null, 'Hello' + i, 100, 60, 80, 30);
                    graph.insertEdge(parent, null, '', vertexMap[i], vertexMap[Math.floor(i/2)] ); // 构建一棵树
                }
                let layout = new mxFastOrganicLayout(graph);
                //layout.execute(parent);

                */
                // 插入节点
                //let v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                //let v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                let v1 = graph.insertVertex(parent, null, 'Hello,', 50, 40, 80, 30);
                let v2 = graph.insertVertex(parent, null, 'World!', 0 , 0, 80, 30);
                let v3 = graph.insertVertex(parent, null, 'World1!', 0 , 0, 80, 30);
                
                // 插入连线 
                graph.insertEdge(parent, null, '', v2, v1);
                graph.insertEdge(parent, null, '', v3, v1);

                //let lay = new mxFastOrganicLayout(graph);
                //lay.execute(parent)
            } finally {
            // 画布更新结束
            graph.getModel().endUpdate();
            }
        } 
    }
</script>

<style lang="scss" scoped>

</style>